<template>
  <div class="bar-chart-container">
    <div ref="inputInChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'inputIn',
    data() {
      return {
        chartData: {
          xAxisData: [], // 横轴数据
          yAxisData: [], // 纵轴数据
        },
      };
    },
    mounted() {
      this.chartData.xAxisData = this.echarts10Data.map(item => item.sku_name);
      this.chartData.yAxisData = this.echarts10Data.map(item => item.SumNum);
      this.initChart();
    },
    watch: {
      echarts10Data(newData) {
        this.chartData.xAxisData = newData.map(item => item.sku_name);
        this.chartData.yAxisData = newData.map(item => item.SumNum);
        this.initChart();
      }
    },
    props: ['echarts10Data'],
    methods: {
      initChart() {
        const myChart = echarts.init(this.$refs.inputInChart);

        const option = {
          title: {
            text: '商品数量统计',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 18
            }
          },
          grid: {
            left: '0',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item', // 鼠标悬浮时显示单个数据项的提示
            formatter: '{b}: {c}' // 显示 SKU 名称和对应的数量
          },
          xAxis: {
            type: 'category',
            data: this.chartData.xAxisData, // 设置 SKU 名称为 X 轴数据
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#333',
              interval: 0, // 强制显示所有标签
              rotate: 20, // 旋转标签，避免重叠
              formatter: function(value) {
                // 如果字符数超过10，进行换行处理
                if (value.length > 10) {
                  return value.slice(0, 10) + '\n' + value.slice(10);
                }
                return value;
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              color: '#333'
            }
          },
          series: [{
            name: '数量',
            type: 'bar',
            data: this.chartData.yAxisData, // Y 轴数据
            itemStyle: {
              color: '#409EFF' // 设置柱状图的颜色
            },
            emphasis: {
              focus: 'series' // 鼠标悬浮时高亮
            },
            barWidth: '30%', // 设置柱状图的宽度为 15%
            barCategoryGap: '50%' // 增加柱状图之间的间隔，给标签更多空间
          }],
        };

        // 设置图表的配置项和数据
        myChart.setOption(option);

        // 监听窗口变化，自动调整图表大小
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      },
    },
  };
</script>

<style scoped>
  .bar-chart-container {
    width: 100%;
    height: 350px;
  }
</style>
